<template>
  <div class=" flex flex-col justify-center items-center">
    <!--<h1>请输入内容</h1>-->
    <el-form :model="formData">
      <div class="flex flex-col justify-center items-center">
        <el-form-item label="图类">
          <el-select v-model="formData.figureSpecies" placeholder="请输入图类">
            <el-option label="LD - 路灯" value="LD"></el-option>
            <el-option label="GD - 供电" value="GD"></el-option>
            <el-option label="TR - 燃气" value="TR"></el-option>
            <el-option label="JS - 给水" value="JS"></el-option>
            <el-option label="DS - 电视" value="DS"></el-option>
            <el-option label="YD - 移动" value="YD"></el-option>
            <el-option label="LT - 连通" value="LT"></el-option>
            <el-option label="DX - 电信" value="DX"></el-option>
            <el-option label="XH - 信号" value="XH"></el-option>
            <el-option label="JK - 监控" value="JK"></el-option>
            <el-option label="HS - 合水" value="HS"></el-option>
            <el-option label="RS - 热水" value="RS"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="起点编号">
          <el-input v-model="formData.startPoint" placeholder="请输入起点编号"
                    @blur="getCompletion" ref="refStartPoint"></el-input>
        </el-form-item>

        <!--<div>起点编号： {{truthStartPoint}}</div>-->


        <el-form-item label="起点类型">
          <el-input v-model="formData.startPointType" placeholder="请输入起点类型"></el-input>
        </el-form-item>

        <el-form-item v-show="formData.startPointType === 's' || formData.startPointType === 'j' " label="起点底深">
          <el-input type="number" v-model="formData.bottomDeep" placeholder="输入点 备注"></el-input>
        </el-form-item>


        <el-form-item v-show="formData.startPointType === 's'
                         || formData.startPointType === 'j'
                         || formData.startPointType === 'b'" label="井盖尺寸">
          <el-input v-model="formData.capSize" placeholder="请输入井盖尺寸" @focus="guessCapSize">

          </el-input>
        </el-form-item>

        <el-form-item label="起点埋深">
          <el-input type="number" v-model="formData.startPointDepth" placeholder="请输入起点埋深"
            @focus="startDepthFocus" @keyup.enter="star"
          ></el-input>
        </el-form-item>

        <!---------------------------------------->
        <div class=" h-0.5 bg-amber-200 w-72 mb-3"></div>

        <el-form-item label="终点编号">
          <el-input v-model="formData.endPoint" placeholder="请输入终点编号" ref="refEndPoint"></el-input>
        </el-form-item>


        <el-form-item label="终点类型">
          <el-input v-model="formData.endPointType" placeholder="请输入终点类型"></el-input>
        </el-form-item>

        <el-form-item v-show="(formData.endPointType === 's' || formData.endPointType === 'j') &&
                                  (formData.startPointType !== 'b' && formData.startPointType !== 'n')"
                      label="终点底深">
          <el-input type="number" v-model="formData.endBottomDeep" placeholder="终点 底深"></el-input>
        </el-form-item>

        <el-form-item label="终点埋深">
          <el-input type="number" v-model="formData.endPointDepth" placeholder="请输入终点埋深"
          @focus="endDepthFocus" @keyup.enter.exact="fnc_submit" @keyup.space="star"
          ></el-input>
        </el-form-item>

        <div class=" h-0.5 bg-amber-200 w-72 mb-3"></div>

        <el-form-item v-show="formData.figureSpecies === 'JS' || formData.figureSpecies === 'HS' " label="材质">
          <el-select v-model="formData.JSmaterial" placeholder="材质">
            <el-option label="PE" value="PE"></el-option>
            <el-option label="铸铁" value="铸铁"></el-option>
            <el-option label="砼" value="砼"></el-option>
            <el-option label="PVC" value="PVC"></el-option>
            <el-option v-show="formData.figureSpecies === 'HS'" label="陶瓷" value="陶瓷"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="线路管径">
          <el-select v-model="formData.pipeDiameter" placeholder="请输入管块尺寸" @blur="guessHoleCount">
            <el-option label="30" value="30"></el-option>
            <el-option label="50" value="50"></el-option>
            <el-option label="100" value="100"></el-option>
            <el-option label="150" value="150"></el-option>
            <el-option label="200" value="200"></el-option>
            <el-option label="300" value="300"></el-option>
            <el-option label="400" value="400"></el-option>
            <el-option label="500" value="500"></el-option>
            <el-option label="600" value="600"></el-option>
            <el-option label="700" value="700"></el-option>
            <el-option label="800" value="800"></el-option>
            <el-option label="900" value="900"></el-option>
            <el-option label="1000" value="1000"></el-option>
            <el-option label="100*50" value="100*50"></el-option>
            <el-option label="200*50" value="200*50"></el-option>
            <el-option label="200*100" value="200*100"></el-option>
            <el-option label="300*100" value="300*100"></el-option>
            <el-option label="400*100" value="400*100"></el-option>
            <el-option label="200*200" value="200*200"></el-option>
            <el-option label="300*200" value="300*200"></el-option>
            <el-option label="60*30" value="60*30"></el-option>
            <el-option label="60*60" value="60*60"></el-option>
            <el-option label="90*60" value="90*60"></el-option>
            <el-option label="90*30" value="90*30"></el-option>
            <el-option label="120*30" value="120*30"></el-option>
            <el-option label="120*60" value="120*60"></el-option>
            <el-option label="120*120" value="120*120"></el-option>
            <el-option v-show="formData.figureSpecies === 'HS'" label="1400" value="1400"></el-option>
            <el-option v-show="formData.figureSpecies === 'HS'" label="1500*1200" value="1500*1200"></el-option>
          </el-select>
        </el-form-item>


        <el-form-item label="占用孔数" v-show="formData.figureSpecies != 'HS' &&
                                              formData.figureSpecies != 'TR' &&
                                              formData.figureSpecies != 'JS' &&
                                              formData.figureSpecies != 'RS'">
          <el-input type="number" v-model="formData.holeCount" placeholder="请输入占用孔数"></el-input>
        </el-form-item>


        <el-form-item>
          <el-button @click="fnc_submit">提交</el-button>
          <el-button @click="star">星星</el-button>
          <el-button @click="train">火车</el-button>
        </el-form-item>

      </div>
    </el-form>
  </div>
</template>

<script setup lang="ts">

import {computed, onMounted, reactive, ref} from "vue";
import axios from "axios";
import {showMessage, showNotification} from "@/utils/tools";


const formData = reactive({
  figureSpecies: "",
  startPoint: "",
  endPoint: "",
  startPointType: "",
  endPointType: "",
  bottomDeep: "",
  endBottomDeep: "",
  pipeDiameter: "",
  holeCount: "",
  capSize: "",
  flow: "",
  startPointDepth: "",
  endPointDepth: "",
  JSmaterial: "",
  // pressure: "",
})

const refEndPoint = ref();
const refStartPoint = ref();

/**
 * 需要上传至服务器的数据
 * up to Server
 */
const truthStartPoint = computed(()=> formData.figureSpecies + formData.startPoint);
const truthStartPointType = computed(()=> formData.startPointType.toUpperCase());

const truthStartPointDepth = computed({
  get() {
    return (Number(formData.startPointDepth) / 100);
  },
  set(val) {
    return val;
  },
});
// const truthStartPointDepth = computed(
//     () => (Number(formData.startPointDepth) / 100),
//     get() {
// );
const truthEndPointDepth = computed(() => (Number(formData.endPointDepth) / 100));
const truthBottomDeep = computed(() => {
  if (truthStartPointType.value == "B") {
    return String((Number(truthStartPointDepth.value) + 0.02).toFixed(2));
  }
  if (truthStartPointType.value != "S" && truthStartPointType.value != "J") {
    return ""
  }
  if (Number(formData.bottomDeep) != 0) {
    return (Number(formData.bottomDeep) / 100)
  }
  else {
    return ""
  }
});
const truthCapSize = computed(() => {
  if(truthStartPointType.value != "J" && truthStartPointType.value != "S" && truthStartPointType.value != "B") {
    return ""
  } else {
    if (formData.capSize.substring(0, 1) == 'p') {
      return "PVC" + formData.capSize.substring(1);
    }
    else if (formData.capSize.substring(0, 1) == 't') {
      return "砼" + formData.capSize.substring(1);
    }
    else {
      return "铸铁" + formData.capSize;
    }

    // return formData.capSize

  }
})

const truthEndPoint = computed(()=> formData.figureSpecies + formData.endPoint)
const truthEndPointType = computed(() => formData.endPointType.toUpperCase());


// 管径
const pipeSize = computed(() => {
  if (formData.figureSpecies == "DX" ||
      formData.figureSpecies == "YD" ||
      formData.figureSpecies == "LT" ||
      formData.figureSpecies == "DS" ||
      formData.figureSpecies == "XH") {

    if (formData.pipeDiameter == "100" ||
        formData.pipeDiameter == "200*100" ||
        formData.pipeDiameter == "300*100" ||
        formData.pipeDiameter == "400*100" ||
        formData.pipeDiameter == "200*200" ||
        formData.pipeDiameter == "300*200" ||
        formData.pipeDiameter == "300*200") {
      return "100塑";
    }

    if (formData.pipeDiameter == "30" ||
        formData.pipeDiameter == "90*30" ||
        formData.pipeDiameter == "120*30" ||
        formData.pipeDiameter == "120*60" ||
        formData.pipeDiameter == "60*60" ||
        formData.pipeDiameter == "90*60" ||
        formData.pipeDiameter == "120*120" ||
        formData.pipeDiameter == "60*30") {
      return "30塑";
    }

    if (formData.pipeDiameter == "50" ||
        formData.pipeDiameter == "100*50" ||
        formData.pipeDiameter == "200*50") {
      return "50塑"
    }
    if (formData.pipeDiameter == "150") {
      return "150塑"
    }
    if (formData.pipeDiameter == "200") {
      return "200塑"
    }
    if (formData.pipeDiameter == "300") {
      return "300塑"
    }
    if (formData.pipeDiameter == "400") {
      return "400塑"
    }
    if (formData.pipeDiameter == "500") {
      return "500塑"
    }
    if (formData.pipeDiameter == "600") {
      return "600塑"
    }
  }
})

// 总孔数
const sumCount = computed(() => {
  if (formData.figureSpecies == "TR" ||
      formData.figureSpecies == "JS" ||
      formData.figureSpecies == "RS" ||
      formData.figureSpecies == "HS") { return "" }


  if(formData.pipeDiameter == "50" ||
      formData.pipeDiameter == "30" ||
      formData.pipeDiameter == "100" ||
      formData.pipeDiameter == "150" ||
      formData.pipeDiameter == "200" ||
      formData.pipeDiameter == "300" ||
      formData.pipeDiameter == "400" ||
      formData.pipeDiameter == "500" ||
      formData.pipeDiameter == "700" ||
      formData.pipeDiameter == "800" ||
      formData.pipeDiameter == "900" ||
      formData.pipeDiameter == "1000" ||
      formData.pipeDiameter == "600") { return "1" }

  if (formData.pipeDiameter == "200*100" ||
      formData.pipeDiameter == "100*50" ||
      formData.pipeDiameter == "60*30")
    {return "2"}
  if (formData.pipeDiameter == "90*30" ||
      formData.pipeDiameter == "300*100")
  {return "3"}
  if (formData.pipeDiameter == "200*200" ||
      formData.pipeDiameter == "400*100" ||
      formData.pipeDiameter == "120*30" ||
      formData.pipeDiameter == "200*50" ||
      formData.pipeDiameter == "60*60")
  {return "4"}
  if (formData.pipeDiameter == "300*200" ||
    formData.pipeDiameter == "90*60"
      )
  {return "6"}
  if (formData.pipeDiameter == "120*60")
  {return "8"}
  if (formData.pipeDiameter == "120*120")
  {return "16"}
})

// 材质
const meterial = computed(() => {
  if (formData.figureSpecies == "JK" ||
        formData.figureSpecies == "YD" ||
        formData.figureSpecies == "LT" ||
        formData.figureSpecies == "DX" ||
        formData.figureSpecies == "DS") { return "光纤" }
  if (formData.figureSpecies == "LD" ||
      formData.figureSpecies == "GD" ||
      formData.figureSpecies == "XH") { return "铜" }
  if (formData.figureSpecies == "TR") { return "PE" }
  if (formData.figureSpecies == "RS") { return "铸铁" }
  // if (formData.figureSpecies == "HS") { return "砼" }
})

// 压力
const pressure = computed(() => {
  if (formData.figureSpecies == "GD") {
    return "10kv"
  }
  if (formData.figureSpecies == "XH" || formData.figureSpecies == "LD") {
    return "0.22kv"
  }
  if (formData.figureSpecies == "TR") {
    return "中压"
  }
  else {
    return ""
  }
})

// 表单提交函数
function pushBar():boolean {
  console.log("pushBar()");

  if (formData.figureSpecies == "HS") {
    if (formData.startPointDepth == "" && formData.endPointDepth !== "") {
      console.log("completion startPointDepth for 'HS'");
      // truthStartPointDepth.value = Number(formData.endPointDepth) - Math.random()*23+11;
      formData.startPointDepth = (Number(formData.endPointDepth) - (Math.random()*23+11)).toFixed().toString();
    }
  }

  if (formData.startPointType == "j" && (formData.capSize.includes("*") || formData.capSize == "")){
    showMessage("圆形井盖只需输入直径", "error");
    return false
  }
  else if (formData.startPointType == ("s" || "b") && (!formData.capSize.includes("*") || formData.capSize == "")){
    showMessage("矩形井盖需要输入长边和短边", "error");
    return false
  }


  // 前端校验完成，向后端发起请求
  else {
    axios({
      method: 'get',
      url: '/api/input',
      headers: {
        'Content-Type': 'application/json'
      },
      params: {
        // 图类
        figureSpecies: formData.figureSpecies,
        // 起点编号
        truthStartPoint: truthStartPoint.value,
        // 起点类型
        truthStartPointType: truthStartPointType.value,
        // 起点底深
        truthBottomDeep: truthBottomDeep.value,
        // 起点埋深
        truthStartPointDepth: truthStartPointDepth.value,

        // 终点编号
        truthEndPoint: truthEndPoint.value,
        // 终点类型
        truthEndPointType: truthEndPointType.value,
        // 终点埋深
        truthEndPointDepth: truthEndPointDepth.value,

        // 线路管径
        pipeDiameter: formData.pipeDiameter,
        // 套管尺寸
        pipeSize: pipeSize.value,
        //总孔数
        sumCount: sumCount.value,
        // 占用孔数
        holeCount: formData.holeCount,

        // 材质
        meterial: meterial.value,
        // 给水材质
        JSmeterial: formData.JSmaterial,
        //井盖尺寸
        truthCapSize: truthCapSize.value,
        // 压力
        pressure: pressure.value,
      }
    })
        .then((res) => {
          console.log(res);
          showMessage(res.data, "success");
        })
        .catch((err) => {
          console.log(err);
          showMessage(err, "error");
        })
    return true
  }
}

function fnc_submit() {
  console.log(formData.figureSpecies);

  if (pushBar()) {
    formData.startPoint = formData.endPoint;
    formData.endPoint = "";
    formData.startPointType = formData.endPointType;

    formData.startPointDepth = formData.endPointDepth;
    formData.endPointDepth = "";
    formData.bottomDeep = formData.endBottomDeep;
    formData.endBottomDeep = "";

    refEndPoint.value.focus();
  }
}

function star() {
  if (pushBar()){
    refStartPoint.value.focus();
  }
}


function train() {
  if (pushBar()) {
    formData.endPoint = formData.startPoint;
    formData.endBottomDeep = formData.bottomDeep;
    formData.endPointDepth = formData.startPointDepth;
    formData.endPointType = formData.startPointType;
  }
}

/**
 * 当起点编号失焦时触发
 * 向服务器请求起点编号的信息并返回
 */
function getCompletion() {
  console.log("getCompletion()");
  axios({
    method: 'get',
    url: '/api/completion',
    headers: {
      'Content-Type': 'application/json'
    },
    params: {
      truthStartPoint: truthStartPoint.value,
    }
  })
      .then((res) => {
        console.log(res);
        if (res.data != "error"){
          formData.bottomDeep = String(Math.round(Number(res.data.backBottomDeep) * 100));
          // formData.capSize = res.data.backCapSize;
          if (res.data.backCapSize.substring(0, 1) == "铸") {
            formData.capSize = res.data.backCapSize.substring(2);
          } else if (res.data.backCapSize.substring(0, 1) == "P") {
            formData.capSize = "p" + res.data.backCapSize.substring(3);
          } else if (res.data.backCapSize.substring(0, 1) == "砼") {
            formData.capSize = "t" + res.data.backCapSize.substring(1);
          }

          formData.startPointType = res.data.backStartPointType.toString().toLowerCase();

          formData.startPointDepth = String(Math.round(Number(res.data.backStartPointDepth) * 100));
          showNotification("填充完成", "success");
        }
        else {
          showNotification("未找到该变量", "info")
        }

      })
      .catch((err) => {
        console.log(err);
        showMessage(err, "error");
      })
  setHoleCountToZero();
}

/**
 * 当井盖尺寸获得焦点时，猜测 capSize
 * 当 起点类型为 J 则猜测井盖尺寸为 铸铁700
 *
 */
function guessCapSize() {
  console.log("guessCapSize()");
  if (formData.startPointType == 'j') {
    if (formData.capSize == ""){
      formData.capSize = "700"
    }
    if (formData.capSize.includes("*")) {
      formData.capSize = "700"
    }
  }
  // 小雨水畀自动填充井盖
  if (formData.startPointType == "b") {
    if (formData.capSize == ""){
      formData.capSize = "700*400"
    }
    if (!formData.capSize.includes("*")) {
      formData.capSize = "700*400"
    }
  }
  if (formData.startPointType == "s" && !formData.capSize.includes("*")) {
    if (formData.figureSpecies == "GD") {
      formData.capSize = "1100*700"
    } else {
      formData.capSize = "p1100*900"
    }
  }
}

/**
 * 当 「线路管径」 失焦时，猜测占用孔数
 * 该方法使用了延迟为 XXms 的 setTimeout 来保证渲染的稳定性
 * 但是依旧有可能会失败
 *
 * 还要避免没有孔数而误输入了占用孔数的情况
 */
function guessHoleCount() {
  console.log("guessHoleCount()");
  if (formData.figureSpecies != "TR" &&
      formData.figureSpecies != "JS" &&
      formData.figureSpecies != "RS" &&
      formData.figureSpecies != "HS") {

    clearTimeout();
    setTimeout(function () {
      console.log(formData.pipeDiameter);
      if (formData.pipeDiameter == "50" ||
          formData.pipeDiameter == "30" ||
          formData.pipeDiameter == "100" ||
          formData.pipeDiameter == "150" ||
          formData.pipeDiameter == "200" ||
          formData.pipeDiameter == "300" ||
          formData.pipeDiameter == "400" ||
          formData.pipeDiameter == "500" ||
          formData.pipeDiameter == "600" ||
          formData.pipeDiameter == "700" ||
          formData.pipeDiameter == "800" ||
          formData.pipeDiameter == "900" ||
          formData.pipeDiameter == "1000") {
        formData.holeCount = "1"
      }
    }, 100)
  }
}

/**
 * 重置占用孔数为0
 */
function setHoleCountToZero() {
  if (formData.figureSpecies == "JS" ||
      formData.figureSpecies == "RS" ||
      formData.figureSpecies == "TR" ||
      formData.figureSpecies == "HS") {
    console.log("set holeCount to 0");
    formData.holeCount = ""
  }
}

/**
 * 下面两个函数仅当在
 * 「图类」为HS 且 "埋深" input 获得焦点时触发
 * 埋深 = 井底深
 *
 * 第二个函数 新增了路灯随机底深
 * 新增了 RS TR JS随机埋深
 */
function startDepthFocus() {
  console.log("startDepthFocus()");
  if (formData.figureSpecies == "HS" && formData.bottomDeep != "" && formData.startPointDepth == "") {
    console.log("value changed");
    formData.startPointDepth = formData.bottomDeep
  }
}
function endDepthFocus() {
  console.log("endDepthFocus()");
  if (formData.figureSpecies == "HS" && formData.endBottomDeep != "") {
    console.log("value changed");
    formData.endPointDepth = formData.endBottomDeep
  }
  if (formData.figureSpecies == "LD") {
    console.log("value changed");
    formData.endPointDepth = (Math.random()*19+20).toFixed(0);
  }
  else if (formData.figureSpecies == "RS" && formData.endPointType == "d") {
    formData.endPointDepth = (Math.random()*39+80).toFixed(0);
  }
  else if (formData.figureSpecies == "TR" && formData.endPointType == "d") {
    formData.endPointDepth = (Math.random()*29+140).toFixed(0);
  }
  else if (formData.figureSpecies == "JS" && formData.endPointType == "d") {
    formData.endPointDepth = (Math.random()*29+140).toFixed(0);
  }
}



</script>

<style scoped>
</style>
